<template>
	<div>
        <div class="selectexp">
<!--            <el-tag class="bq" >专家姓名:</el-tag>-->
            <span class="bq">专家姓名:</span>
            <el-input v-model="input" placeholder="请输入专家名称查询" style="width: 200px"></el-input>
            <el-button class="selectbut" type="primary" @click="chxun()">查询</el-button>
        </div>

		<el-table :data="exp.list" style="width: 100%">
			<el-table-column type="index" :index="(currentPage - 1) * limit+1" label="序号" width="80" align="center" />
			<el-table-column prop="expertId" label="ID" width="80" align="center"></el-table-column>
			<el-table-column label="照片" width="100px" align="center">
				<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
			</el-table-column>
			<el-table-column prop="expertName" label="姓名" width="150px"align="center"></el-table-column>
			<el-table-column prop="sex" label="性别" width="80px" align="center"></el-table-column>
			<el-table-column prop="phone" label="电话" width="180px" align="center"></el-table-column>
			<el-table-column prop="company" label="在职单位" width="150px" align="center"></el-table-column>
			<el-table-column prop="specialty" label="专长" align="center"></el-table-column>
			<el-table-column prop="createDate" label="创建时间" width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="status" label="状态" width="200px" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status==0?false:true" active-color="#13ce66" inactive-color="#ff4949" @change="handleStatus(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
			<el-table-column fixed="right" label="操作" width="180" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="handleChongzhi(scope.row.expertId)">重置状态</el-button>
					<el-button type="text" size="small" @click="handleBianji(scope.row.expertId)">编辑</el-button>
					<el-button type="text" size="small" @click="DelectExpert(scope.row.expertId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
            <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="pagePrev">上一页</el-button>
            <el-tag type="success" effect="dark" class="page">
                <span>页码:{{page}}/<span v-if="this.expALL.list != undefined">{{Math.ceil((this.expALL.list.length)/7)}}</span></span>
            </el-tag>
            <el-button type="primary" icon="el-icon-arrow-right" size="mini" @click="pageNext">下一页</el-button>
		</div>
	</div>
</template>

<script>
export default {
	name: 'DataTable-zjgl',
	props: {
		datalist: Array,
		currentPage: Number,
		limit: Number
	},
	data() {
		return {
			pageIndex:0,
			pageSize:7,
			page:1,
			exp:[],
			expALL:[],
			deleteshuxing:null,
            input:'',
			sta:'',

		};
	},
	mounted:function(){
		 this.query();//需要触发的函数
	},
	filters:{
		formateDate:function(value){
			var d=new Date(value);
			var y=d.getFullYear();
			var m = d.getMonth()+1;
			var day=d.getDate();
			var h=d.getHours();
			var m=d.getMinutes();
			var s=d.getSeconds();
			return y+"年"+m+"月"+day+"日" +h+":"+m+":"+s;
		}
	},
	methods: {
		pageNext(){
			if (this.exp.list.length==this.pageSize){
				// alert("pageIndex"+this.pageIndex+"--pagesize"+this.pageSize)
				this.pageIndex+=7;
				this.page++;
				this.query();
			}
		},
		pagePrev(){
			if (this.pageIndex!=0){
				this.pageIndex-=7;
				this.page--;
				this.query();
			}
		},
		chxun(){
			this.page=1;
			this.pageIndex=0;
			this.query();
		},
		handleChongzhi(expertId)
		{
			let that=this
			this.$axios.post(
					'http://localhost:7070/api/Administration/UpdateExpertForEditStatus',
					// that.$qs.stringify(obj)
					this.$qs.stringify({expertId:expertId,status:this.sta}),
			).then(function (response) {
				if(response.data){
					// alert("重置成功！")
					that.$message({
						type: 'success',
						message: '重置成功!',
					})
				}
				else
				{
					// alert('重置失败！')
					that.$message({
					type: 'error',
					message: '重置失败!',
					})
				}
				that.query()
			})
		},
		handleBianji(expertId)
		{
			this.$router.push({path:'/myCenter/bianji'});
			localStorage.setItem('expertId',expertId)
		},
        handleStatus(value){
			if (value.status==0)
			value.status= false;
			// alert(value.status)
            console.log(value.status)
			if(value.status){
				this.sta = '0';
				value.status=false;
			}else {
				this.sta = '1';
				value.status=true;
			}
			// alert(value.status+this.sta)
        },
		query(){
			let that=this
			this.$axios.post(
					'http://localhost:7070/api/Administration/pViewPageExpert',
					// that.$qs.stringify(obj)
					this.$qs.stringify({pageIndex:that.pageIndex,pageSize:that.pageSize,querStr:that.input}),
			).then(function (response) {
				console.log("------------1-------------------")
				console.log(response.data);
				// console.log(response.data[1]);
				that.exp = response.data;
				console.log("------------2-------------------")
				console.log(that.exp);
			})
			this.queryall();
		},
		queryall(){
			let that=this
			this.$axios.post(
					'http://localhost:7070/api/Administration/pViewPageExpert',
					// that.$qs.stringify(obj)
					this.$qs.stringify({pageIndex:0,pageSize:100,querStr:that.input}),
			).then(function (response) {
				that.expALL = response.data;
			})
		},
        open() {
                //你的逻辑代码
                const h = this.$createElement;
                this.$msgbox({
                    title: '确定删除！',
                    message: h('p', null, [
                        h('span', null, '此操作将永久删除该文件, 是否继续?'),
                        // h('i', { style: 'color: teal' }, 'VNode')
                    ]),
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            this.deleteshuxing = true;
                            // alert("action:"+this.deleteshuxing);
                            setTimeout(() => {
                                done();
                                setTimeout(() => {
                                    instance.confirmButtonLoading = false;
                                }, 200);
                            }, 2000);
                        } else {
                            done();
                        }
                    }
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除!',
                    });
                });
        },
		DelectExpert(exportid){
		    // alert("1"+this.deleteshuxing)
            this.open()
            setTimeout(() =>{
                this.delete(exportid)
            },5000);

		},
		delete(exportid) {
                //你的逻辑代码
                let that=this
                // alert("2"+this.deleteshuxing);
                if(this.deleteshuxing){
                    this.$axios.post(
                        'http://localhost:7070/api/Administration/DelectExpert',
                        // that.$qs.stringify(obj)
                        this.$qs.stringify({expertId:exportid})
                    ).then(function (response) {
                        console.log("------------1-------------------")
                        console.log(response.data);
                        if(response.data){
                            alert("删除成功！");
							location.reload();
                        }else alert("删除失败！");
                        this.deleteshuxing=false;
                    })
                }
		},

	}
};
</script>

<style scoped="scoped">

    .bq{
        height: 40px;
        padding-right: 20px;
    }
    .selectbut{
        margin-left: 20px;
    }
    .selectexp{
        margin-bottom: 20px;
    }
    .block{
        margin-top: 20px;
    }
    .page{
        margin-left: 20px;
        margin-right: 20px;
    }
</style>
